<template>
  <view class="spend">
    <view class="top">
      <view class="left"><text>日期选择：</text></view>
      <view class="right">
        <view class="date_item">
          <dyDatePicker placeholder="开始日期" @getData="getStartTime"></dyDatePicker>
        </view>
        <view class="filter_inputline"></view>
        <view class="date_item">
          <dyDatePicker placeholder="结束日期" @getData="getEndTime"></dyDatePicker>
        </view>
      </view>
    </view>
    <view class="spend-button">
      <button type="warn" class="button-button" @click="submit">查询 /Query <text>共 {{ accessList.length }} 条</text></button>
    </view>
    <view class="buttom" v-for="(item, i) in accessList" :key="i">
      <view class="buttom-list">
        <view class="list-list">
          <view class="list-left">
            <view class="list-center">
              <view class="center-top">
                <text class="top-title">访问时间: {{ item.createdAt }}</text>
                <!-- <text class="top-English">{{ item.english }}</text> -->
              </view>
              <view class="center-buttom">
                <text>访问IP: {{ item.accessIp }}</text>
                <!-- <text>余额：100</text> -->
              </view>
            </view>
          </view>
          <view class="list-right">
            <text class="money">¥ {{ item.deductionPrice }}</text>
          </view>
        </view>
      </view>
    </view>
		<view class="more" v-if="accessList.length === 0">没有信息</view>
  </view>
</template>

<script>
import dyDatePicker from '@/components/dy-Date/dy-Date.vue'

export default {
  components: {
    dyDatePicker
  },
  data() {
    return {
      accessList: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  onLoad() {
    let params = {
      page: this.page.pageIndex,
      limit: this.page.pageSize
    }
    this.init(params)
  },
  methods: {
    init(params) {
      params.startTime = this._startTime || ''
      params.endTime = this._endTime || ''
      this.$api.getDeductionRecords(params).then(res => {
        if (res.success) {
          if (res.rows.length > 0) {
            res.rows.map(item => {
              this.accessList.push(item)
            })
          }
        } else {
          uni.showToast({ title: res.msg, icon: 'none' })
        }
      }).catch(err => {
        console.log('request fail', err)
      })
    },
    submit() {
      let params = {
        page: 1,
        limit: 10
      }
      this.accessList = []
      this.init(params)
    },
    getStartTime(time) {
      this._startTime = time
    },
    getEndTime(time) {
      this._endTime = time
    },
  },
  onReachBottom() {
    this.page.pageIndex = this.page.pageIndex + 1
    let params = {
      page: this.page.pageIndex,
      limit: this.page.pageSize
    }
    this.init(params)
  }
}
</script>

<style lang="scss" scoped>
.spend {
  .top {
    display: flex;
    align-items: center;
    padding: 30rpx;
    .left {
      text {
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
      }
    }
    .right {
      display: flex;
      .date_item {
        width: 240rpx;
        text-align: center;
        border: 1px solid #ececec;
        line-height: 78rpx;
      }
      .filter_inputline {
        margin: 0 4rpx;
        line-height: 78rpx;
        &:after {
          content: '—';
          font-size: 28rpx;
          color: #848b9a;
        }
      }
    }
  }
  .spend-button {
    padding: 0 40rpx 20rpx 40rpx;
    .button-button {
      background: $uni-color-base;
      text {
        position: absolute;
        font-size: 28rpx;
        right: 20rpx;
        line-height: 90rpx;
      }
    }
  }
  .buttom {
    .buttom-list {
      padding: 20rpx 32rpx;
      .list-list {
        background: #FFFFFF;
        box-shadow: 0 0 16rpx #999;
        border-radius: 20rpx;
        display: flex;
        padding: 20rpx;
        justify-content: space-between;
        .list-left {
          display: flex;
          align-items: center;
          .left-img {
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .list-center {
            view {
              line-height: 60rpx;
            }
            .center-top {
              .top-title {
                font-size: 34rpx;
                font-weight: 400;
                color: #333333;
                margin-right: 20rpx;
              }
              .top-English {
                color: #999999;
                font-size: 28rpx;
              }
            }
            .center-buttom {
              text {
                font-size: 28rpx;
                font-weight: 400;
                color: #999999;
                margin-right: 40rpx;
              }
            }
          }
        }
        .list-right {
          display: flex;
          align-items: center;
          image {
            width: 32rpx;
            height: 32rpx;
          }
          .money {
            font-size: 40rpx;
            color: #FA6400;
          }
        }
      }
    }
  }
	.more {
		text-align: center;
		padding: 20rpx;
		font-size: 32rpx;
	}
}
</style>
